import { Meta } from '@storybook/blocks';
import YouTubeVideoPlayer from '@/components/YouTubeVideoPlayer';
import * as RangeSliderStories from '../stories/RangeSlider.stories';

<Meta of={RangeSliderStories} />

# RangeSlider

A Material Design range slider.

<YouTubeVideoPlayer videoId="ufb4gIPDmEs" />

## Example

```dart liveslice=RangeSlider
double _starValue = 10;
double _endValue = 80;

@override
Widget build(BuildContext context) {
  return RangeSlider(
    values: RangeValues(_starValue, _endValue),
    min: 0.0,
    max: 100.0,
    onChanged: (values){
      setState(() {
        _starValue = values.start.roundToDouble();
        _endValue = values.end.roundToDouble();
      });
    },
  );
}
```

## Related Links

- https://api.flutter.dev/flutter/material/RangeSlider-class.html
- https://youtu.be/ufb4gIPDmEs
